<template>
	<div class="main">
		<div class="cover_c">
			<div class="cover">
				<img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt=""
					style="width:100%;height:100%">
			</div>
		</div>
		<div class="content">
			<div class="title" v-show="status">用户信息填写</div>
			<div class="title" v-show="!status">用户信息修改</div>
			<div class="middle">
				<div class="blue"></div>
				<div class="subtitle" v-show="status">填写用户个人信息</div>
				<div class="subtitle" v-show="!status">修改用户个人信息</div>
			</div>
			<div class="explain">（带*项为必填信息，老师身份须填写科目，学生身份须填写高考年份）。</div>
			<div class="form">
				<div class="left">
					<el-form ref="form" :model="form" label-width="100px" style="width:300px;" size="mini"
						id="selectform" :rules="rules">
						<!-- <el-form-item label="所在省份: ">
                            <el-select v-model="form.province" placeholder="请选择您所在省份" style="width:100%">
                            <el-option :label="item.provinceName" :value="item.id" v-for="(item,index) in allProvince" :key="index"></el-option>
                            </el-select>
                        </el-form-item> -->
						<el-form-item label="姓名:" style="margin-top:58px" prop="fullName" id="selectForm">
							<el-input v-model="form.fullName" placeholder="请填写您的姓名" class="input"></el-input>
						</el-form-item>
						<el-form-item label="科类: " style="margin-top:58px" prop="subject" id="selectForm">
							<el-select placeholder="请选择您的科目" style="width:100%" v-model="form.subject">
								<el-option label="理科" value=0></el-option>
								<el-option label="文科" value=1></el-option>
								<el-option label="新高考" value=2></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="省份: " style="margin-top:58px" prop="provinceId" id="selectForm">
							<el-select @change="handlechange()" v-model="form.provinceId" placeholder="请选择"
								v-show="status1">
								<el-option v-for="item in provinceOption" :key="item.id" :label="item.provinceName"
									:value="item.id">
								</el-option>
							</el-select>
							<el-select v-model="form.provinceId" placeholder="请选择" v-show="!status1" disabled>
								<el-option v-for="item in provinceOption" :key="item.id" :label="item.provinceName"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="学校:" style="margin-top:58px" prop="school" id="selectForm">
							<el-input v-model="form.school" placeholder="请填写您的学校" class="input"></el-input>
						</el-form-item>
						<el-form-item label="QQ:" style="margin-top:58px" id="selectForm">
							<el-input v-model="form.qqNumber" placeholder="请填写您的QQ号" class="input"></el-input>
						</el-form-item>
						<el-form-item label="密码:" v-show="status" style="margin-top:58px" prop="password"
							id="selectForm">
							<el-input v-model="form.password" placeholder="请填写您的密码" class="input" type="password">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="right">
					<el-form ref="form" :model="form" label-width="140px" style="width:400px;" size="mini"
						id="selectform" :rules="rules">
						<el-form-item label="身份:" style="margin-top:58px" prop="identity" id="selectForm">
							<el-radio-group v-model="form.identity" size="mini">
								<!-- <el-radio :label="0">老师</el-radio>-->
								<el-radio :label="1">学生</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="高考年份: " style="margin-top:58px" prop="year" id="selectForm">
							<el-input type="text" v-model="form.year" placeholder="请选择您的高考年份" class="input"></el-input>
							<!-- <el-select placeholder="请选择您的高考年份" style="width:100%" v-model="form.year">
								<el-option label="2021" value=2021></el-option>
								<el-option label="2020" value=2020></el-option>
							</el-select> -->
						</el-form-item>
						<el-form-item label="市(县):" style="margin-top:58px" prop="city" id="selectForm">
							<el-cascader v-if="isshow" :placeholder="text" v-model="form.city" :props="prop" >
							</el-cascader>
							<!-- <el-input v-model="form.city" placeholder="请填写您的市(县)" class="input"></el-input> -->
						</el-form-item>
						<el-form-item label="手机号/邮箱:" style="margin-top:58px" prop="phoneNumberOrEmail" id="selectForm">
							<el-input v-model="form.phoneNumberOrEmail" placeholder="请填写您的手机号或邮箱" class="input"
								v-show="status"></el-input>
							<el-input v-model="form.phoneNumberOrEmail" placeholder="请填写您的手机号或邮箱" class="input" disabled
								v-show='!status'></el-input>
						</el-form-item>
						<el-form-item style="margin-top:48px" v-show="status">
							<el-button type="primary" @click="getCode()" :disabled="codeBtnDisabled">获取验证码</el-button>
							<span v-show="codeBtnDisabled"><span style="color:red;">{{this.count}}</span>秒后可再次获取</span>
						</el-form-item>
						<el-form-item label="验证码:" style="margin-top:69px" prop="code" v-show="status">
							<el-input v-model="form.code" placeholder="请输入您收到的验证码" class="input"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div style="margin-top:0.297292rem">
				<el-button type="primary" class="submit" v-show="status" @click="submit()">提交系统注册</el-button>
				<el-button type="primary" class="submit" v-show="!status" @click="submit()">提交系统修改</el-button>
			</div>
		</div>

		<!-- <div class="card content">
        <div class="biaodan">
            用户信息填写
        </div >
        <div class="title1">
            填写用户个人信息
        </div>
        <div class="title2">
            (带*为必填信息，老师身份填写科目，学生身份需填写高考年份)
        </div>
         <el-row>
            <el-col :span="12">
                <div class="one">
                    <a class="red">*</a>姓名:  <input placeholder="请输入"  v-model="form.fullName" clearable class="input1"/>
                </div>
                <div class="one">
                    <a class="red">*</a>科目: <select  v-model="form.subject" placeholder="请选择" class="input1">
                        <option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </option>
                    </select >
                </div>
                <div class="one">
                    <a class="red">*</a>省份: 
                    <select  v-model="form.provinceId" placeholder="请选择" class="input3">
                        <option
                            v-for="item in provinceOption"
                            :key="item.id"
                            :label="item.provinceName"
                            :value="item.id">
                        </option>
                    </select >
                </div>
                <div class="one">
                    <a class="red">*</a>学校:  <input placeholder="请输入"  v-model="form.school" clearable class="input1"/>
                </div>
                <div class="one">
                    QQ:  <input placeholder="请输入"  v-model="form.qqNumber" clearable class="input1"/>
                </div>
                <div class="one">
                    <a class="red">*</a>密码:  <input placeholder="请输入"  v-model="form.password" clearable class="input1"/>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="one2">
                    <a class="shenfen"><a class="red">*</a>身份:</a>
                    <radio-group   class="input2"> 
                        <input  v-model="form.identity" type="radio" :value="0"/>老师
                        <input  v-model="form.identity" type="radio" :value="1"/>学生
                    </radio-group>
                </div>
                <div class="one">
                    <a class="red">*</a>高考年份:
                     <select  v-model="form.year" placeholder="请选择" class="input3">
                        <option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </option>
                    </select >
                </div>
                <div class="one">
                    <a class="red">*</a>市（县）:  <input placeholder="请输入"  v-model="form.city" clearable class="input1"/>
                </div>
                <div class="one3">
                    <a class="red">*</a>手机/邮箱:  <input placeholder="请输入"  v-model="form.phoneNumberOrEmail" clearable class="input4"/>
                </div>
                <div class="code_button">
                    <el-button type="primary" @click="getCode()" :disabled="codeBtnDisabled">获取验证码</el-button>
                    <span v-show="codeBtnDisabled"><span style="color:red;">{{this.count}}</span>秒后可再次获取</span>
                </div>
                <div class="code">
                    <a class="red">*</a>验证码:  <input placeholder="请输入"  v-model="form.code" clearable class="input5"/>
                </div>
            </el-col>
        </el-row>
        <div style="margin-top:0.507292rem">
                <el-button type="primary" class="submit"  @click="submit()">提交系统注册</el-button>
            </div>
    </div> -->
	</div>

</template>
<script>
	import sha from '../common/sha1'
	export default {
		data() {
			return {
				//status判断为初次填写还是修改信息 true为第一次填写 false为修改信息
				status: true,
				isshow: true,
				status1: true,
				editId: String,
				form: {
					fullName: "",
					subject: "",
					provinceId: "",
					school: "",
					qqNumber: "",
					password: "",
					identity: "",
					year: "",
					city: "",
					phoneNumberOrEmail: "",
					code: "",
				},
				text:"请选择您的市(县)",
				options: [{
						value: 1,
						label: '理科'
					},
					{
						value: 0,
						label: '文科'
					},
				],
				options2: [{
						value: 2021,
						label: '2021'
					},
					{
						value: 2020,
						label: '2020'
					},
				],
				provinceOption: [],
				// 超级管理员的判断标识
				superidentity: "",
				codeBtnDisabled: false,
				count: null,
				axiosUrl: '',
				codei: 1,
				// 市县的级联框
				prop: {
					// expandTrigger: 'hover',
					lazy: true,
					lazyLoad: this.lazyLoad
				},
				//表单验证
				rules: {
					fullName: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}, ],
					// subject: [
					//     { required: true, message: '请选择您的科目', trigger: 'blur' },
					// ],
					provinceId: [{
						required: true,
						message: '请选择您所在省份',
						trigger: 'blur'
					}, ],
					school: [{
						required: true,
						message: '请输入学校',
						trigger: 'blur'
					}, ],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '密码长度必须在6-16位',
							trigger: 'blur'
						},
						// { pattern:/[0-9a-zA-Z]{1,6}/, message: '密码必须由6-12位数字或字母组成', trigger: 'blur'},
					],
					year: [{
						required: true,
						message: '请选择您的高考年份',
						trigger: 'blur'
					}, ],
					city: [{
						required: true,
						message: '请输入您所在的市(县)',
						trigger: 'blur'
					}, ],
					phoneNumberOrEmail: [{
						required: true,
						message: '请输入您的邮箱/手机号',
						trigger: 'blur'
					}, ],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ],
				}
			}
		},
		methods: {
			getCode() {
				//邮箱正则
				let emailReg =
					/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
				//手机号正则
				let phoneReg = /^(?:(?:\+|00)86)?1\d{10}$/
				let time = 60 //计时时间
				if (this.form.phoneNumberOrEmail == "") {
					this.$notify.error({
						title: "失败",
						message: "邮箱不可为空"
					})
					return
				}
				//正则匹配
				else if (emailReg.exec(this.form.phoneNumberOrEmail)) {
					console.log('邮箱');
					this.axiosUrl = `${this.baseURL}/api/get-register-code?email=${this.form.phoneNumberOrEmail}`
				} else if (phoneReg.exec(this.form.phoneNumberOrEmail)) {
					console.log('手机');
					this.axiosUrl =
						`${this.baseURL}/api/get-phone-register-code?phoneNumber=${this.form.phoneNumberOrEmail}&i=${this.codei}`
				} else {
					this.$notify.error({
						title: "失败",
						message: "格式错误"
					})
					return
				}
				this.$axios.get(this.axiosUrl).then(res => {
					if (res.data.status == 200) {
						this.$notify.success({
							title: "验证码已发送至您的邮箱/手机",
							message: "一分钟后可再次获取"
						})
						this.count = time
						this.codeBtnDisabled = true
						let timer = setInterval(() => {
							if (this.count > 0) {
								this.count--
							} else {
								this.codeBtnDisabled = false
								clearInterval(timer) //清除定时器
							}
						}, 1000)
					} else {
						this.$notify.error({
							title: "获取失败",
							message: res.data.msg
						})
					}
				})
			},
			// 省份改变触发函数使市县选择框值改变
			handlechange() {
				console.log(this.form.provinceId)
				// 重新加载级联选择框，实现根据省份查出市县的数据
				this.isshow = false;
				// console.log(this.isShow)

				this.$nextTick(() => {
					this.isshow = true;
				})


			},
			// getname(){
			// 	this.lazyLoad()
			// },
			async lazyLoad(node, resolve) {
				const {
					level
				} = node;
				if (level === 0) { //一级选择器的生成
					const {
						data: res
					} = await this.$axios.get(
						// `${this.baseURL}/SubjectProfessionalClassification/showAllSubjects`
						`${this.baseURL}/ProvinceCityCountyController/showCityByProvinceId?provinceId=${this.form.provinceId}`
					)

					let nodes = Array.from(res.data).map(item => ({
						value: item.city,
						label: item.city // 生成列表 array.from可以研究研究 真的是好用
					}))
					resolve(nodes)
				} else if (level === 1) { // 二级选择器的生成
					const {
						data: res
					} = await this.$axios.get(
						// `${this.baseURL}//SubjectProfessionalClassification/showMajorNameByMajorCategories?majorCategories=${node.value}`
						`${this.baseURL}/ProvinceCityCountyController/showCountyByCity?city=${node.value}`
					)
					let nodes = Array.from(res.data).map(item => ({
						value: item.county,
						label: item.county,
						leaf: level >= 1 // 设置为只有二级选择
					}))
					resolve(nodes)
				}
			},
			submit() {
				if(this.form.city!==""){
					var first = this.form.city[0]
					var second = this.form.city[1]
					this.form.city = first + second
				}
				console.log(this.form)
				let identityInfo = this.form.identity ? this.form.year : this.form.subject //教师填写科目，学生填写高考年份
				if (this.form.fullName == "" || this.form.identity == ""|| this.form.identity=="" || this.form.provinceId == "" || identityInfo ==
					null|| identityInfo=="" || this.form.school == "" || this.form.city == "" || this.form.phoneNumberOrEmail == "" || this
					.form.password == "") {
					this.$notify.error({
						title: "失败",
						message: "信息填写不完整"
					})
					return
				}
				// console.log(this.form);
				if (this.status == true) {
					let password = sha.sha1(this.form.password)
					console.log(password);
					this.$axios.post(`${this.baseURL}/sysAdmin/register`, {
							fullName: this.form.fullName,
							city: this.form.city,
							code: this.form.code,
							phoneNumberOrEmail: this.form.phoneNumberOrEmail,
							identity: this.form.identity,
							identityInfo: String(identityInfo),
							password: password,
							provinceId: this.form.provinceId,
							qqNumber: this.form.qqNumber,
							school: this.form.school,
							// username:JSON.parse(sessionStorage.active_user)
						}).then(res => {
							if (res.data.status == 200) {
								this.$notify.success({
									title: "成功",
									message: res.data.msg
								})

								this.$router.push('/login')
							} else {
								this.$notify.error({
									title: "失败",
									message: res.data.msg
								})
							}
						})
						.catch(err => {
							this.$notify.error({
								title: "失败",
								message: err.data
							})
						})
				} else {
					console.log(this.form.fullName);
					this.$axios.post(`${this.baseURL}/information/updateUserInformation`, {
							fullName: this.form.fullName,
							city: this.form.city,
							code: this.form.code,
							email: this.form.email,
							identity: this.form.identity,
							identityInfo: String(identityInfo),
							phoneNumber: this.form.phoneNumber,
							provinceId: this.form.provinceId,
							qqNumber: this.form.qqNumber,
							school: this.form.school,
							username: JSON.parse(sessionStorage.username),
							id: this.form.id
						}).then(res => {
							if (res.data.status == 200) {
								this.$notify.success({
									title: "成功",
									message: res.data.msg
								})
								this.$router.push('/informationfilling')
								sessionStorage.setItem('provinceId', this.form.provinceId)
								sessionStorage.setItem('year', identityInfo)
							} else {
								this.$notify.error({
									title: "失败",
									message: res.data.msg
								})
							}
						})
						.catch(err => {
							this.$notify.error({
								title: "失败",
								message: err.data
							})
						})
				}

			},
			async getInformation() {
				let username = JSON.parse(sessionStorage.username)
				const {
					data: res
				} = await this.$axios.get(`${this.baseURL}/information/queryUserInfoByID?username=${username}`)

				console.log(res.data.data);
				if (res.data.identityInfo != "理科" && res.data.identityInfo != "文科" && res.data.identityInfo != "新高考") {
					res.data.data.year = res.data.data.identityInfo
				}else{
					res.data.data.subject= res.data.data.identityInfo
				}
				this.text = res.data.data.city
				this.form = res.data.data
				// 暴力加载
				this.isshow = false;
				this.$nextTick(() => {
					this.isshow = true;
				})
				if (res.data.total == 1) {
					this.status1 = true
				}
				// this.form.password = JSON.parse(sessionStorage.secret);

			}
		},
		watch: {},
		mounted() {
			this.provinceOption = JSON.parse(sessionStorage.province);
			let editInformation = sessionStorage.editInformation
			let username = JSON.parse(sessionStorage.username)
			console.log(editInformation);
			console.log(username);
			if (editInformation == 1) {
				this.status1 = false
				this.status = false
				this.getInformation()
			}
		},

	}
</script>
<style scoped>
	.content {
		width: 1440px;
		min-height: 1080px;
		background-color: #fff;
		margin: 50px auto;
		/* position: relative; */
		/* margin-bottom: 24px; */
		/* position: relative; */
		z-index: 1;
	}

	.title {
		font-size: 42px;
		font-family: Noto Sans SC;
		font-weight: 500;
		line-height: 71px;
		color: #000000;
		margin-top: 45px;
	}

	.main {
		min-height: 1000px;
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
	}

	.cover {
		position: absolute;
		top: -110px;
		z-index: 0;
		/* width: 100%; */
		height: 276px;
		/* text-align: center; */
		left: 50%;
		margin-left: -960px;
		overflow: hidden;
	}

	.cover_c {
		position: relative;
		width: 100%;
	}

	.middle {
		display: flex;
		flex-direction: row;
		margin-top: 30px;
	}

	.explain {
		text-align: left;
		font-size: 22px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 31px;
		color: rgba(0, 0, 0, 0.45);
		margin-left: 68px;
		margin-top: 8px;
	}

	.blue {
		width: 8px;
		height: 40px;
		background: #33AAFF;
		margin-left: 68px;
	}

	.subtitle {
		/* width: 256px; */
		/* height: 32px; */
		font-size: 32px;
		font-family: Noto Sans SC;
		font-weight: 500;
		line-height: 43px;
		color: #000000;
		margin-left: 10px;
		letter-spacing: 1px;
	}

	.form {
		width: 1200px;
		margin: 25px auto;
		display: flex;
		flex-direction: row;

	}

	.left {
		flex: 1;
	}

	.right {
		flex: 1
	}

	/* element选择框样式穿透 修改样式 */
	#selectform>>>.el-form-item__label {
		font-size: 20px;
		font-family: Noto Sans SC;
		color: #333333;
		line-height: 45px;
	}

	#selectform>>>.el-input__inner {
		border: 1px solid rgba(51, 170, 255, 1);
		border-radius: 8px;
		height: 100%;
		font-family: Noto Sans SC;
	}

	#selectform>>>.el-input.is-disabled .el-input__inner {
		border-color: #E4E7ED;
	}

	#selectform>>>.el-input {
		width: 325px;
		height: 45px;
	}

	#selectform>>>.el-radio__inner {
		width: 21px;
		height: 20px;
	}

	#selectform>>>.el-form-item__content {
		text-align: left;
		/* margin-left: 560px; */
	}

	#selectform>>>.el-radio__inner::after {
		width: 6px;
		height: 6px;
	}

	.input {
		width: 322.11px;
		float: left;
	}

	.submit {
		width: 347px;
		height: 62px;
		border-radius: 10px;
		font-size: 24px;
		font-family: Noto SC Sans;
		font-weight: 200;

	}

	.code_button {
		margin-top: 20px;
		/* margin-right: 20px; */
		margin-left: 180px;
		text-align: left;
	}

	.code {
		margin-top: 115px;
		margin-left: -20px;
		margin-right: 20px;
		font-weight: bold;
	}

	::v-deep .el-input__inner {
		font-size: 20px;
	}

	#selectForm>>>.el-form-item__label {
		font-size: 23px;
	}

	/deep/ .el-radio__label {
		font-size: 20px;
	}

	/deep/ .el-select-dropdown__item {
		font-size: 17px;
	}
</style>
